<template>
  <div class="personalset">
    <div class="personalset_main">
      <el-tabs tab-position="left" v-model="activeName">
        <el-tab-pane label="基本设置" name="first" ><!-- v-if="isRouterAlive"-->
          <base-set />
        </el-tab-pane>
        <el-tab-pane label="安全设置" name="second">
          <security-set />
        </el-tab-pane>
        <el-tab-pane label="账号绑定" name="third">
          <account-binding />
        </el-tab-pane>
        <el-tab-pane label="新消息通知" name="fourth">
          <new-news />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import baseSet from "./baseSet/index";
import securitySet from "./securitySet/index";
import accountBinding from "./accountBinding/index";
import newNews from "./newNews/index";
export default {
  name: "personalset",
  components: {
    baseSet,
    securitySet,
    accountBinding,
    newNews,
  },
  // provide() {
  //   return {
  //     reload: this.reload,
  //   };
  // },
  data() {
    return {
      activeName: "first",
      // isRouterAlive: true,
    };
  },
  methods: {
    // reload() {
    //   this.isRouterAlive = false;
    //   this.$nextTick(function () {
    //     this.isRouterAlive = true;
    //   });
    // },
  },
};
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.personalset {
  * {
    margin: 0;
    padding: 0;
  }
  box-sizing: border-box;
  // display: flex;
  // flex-direction: column;
  background-color: #f3f3f3;
  padding: 20px;
  .personalset_main {
    padding: 20px;
    background-color: #fff;
    // border-radius: 8px;
    /deep/ .el-tabs__header {
      width: 200px;
    }
    /deep/ .el-tabs--left .el-tabs__header.is-left {
      margin-right: -1px;
    }

    /deep/ .el-tabs--left .el-tabs__item.is-left {
      text-align: left;
    }

    /deep/ .el-tabs__item.is-active {
      color: #409eff;
      background-color: #e6f7ff;
    }
    /deep/ .el-tabs__content {
      border-left: 2px solid #e4e7ed;
    }
    /deep/ .el-form--label-top .el-form-item__label {
      padding: 0;
    }
    /deep/ .el-tabs__nav-scroll {
      padding: 0;
    }
  }
}
</style>